{% extends 'home/base.html' %}

{% block title %}Book Appointment{% endblock %}
{% block heading %}Book Appointment{% endblock %}
{% block body %}
    <div class="row">
    <form class="col s12" action='/appointments/book/' method="POST">
    {%csrf_token%}
       <div class="row">
    </div>
    <ul>
        <li>
            <div class="input-field col s6">
              <input  type="search" name="doctor_name" placeholder="默认为全部医生，输入病人医生以过滤">
          </div>
            <div class="input-field col s6">
              <input  type="search" name="patient_name" placeholder="默认为全部病人，输入病人姓名以过滤">
          </div>
            <div><button type="submit" class="btn">fliter</button></div>
        </li>
    </ul>
    </form>
    </div>
<div class="row">
  <form class="col s12" action='/appointments/do_book/' method="POST">
    {%csrf_token%}
    <div class="row">
      <div class="input-field col s6">
        <select name="doctor" id="doctor" class="validate" required>
          {% for doctor in doctors_list %}
          <option value="{{doctor.username}}">医生：{{doctor.username}}  email： {{doctor.email}}   </option>
          {% endfor %}
        </select>

      </div>
      <div class="input-field col s6">
          <select name="patient" id="patient" class="validate" required>
          {% for patient in patient_list %}
            <option value='{{patient.username}}'>病人：{{patient.username}}  email：   {{patient.email}} </option>
          {% endfor %}
        </select>
      </div>
      <div class="input-field col s6">
        <input type="date" name='appointment_date' id="appointment_date">
        <label for="appointment_date" class="active">Date</label>
      </div>
      <div class="input-field col s6">
        <input type="time" name='appointment_time' min="09:30" max="20:30" required="true">
        <label for="appointment_time" class="active">Time</label>
      </div>
      <button type="submit" class="btn">Book</button>
    </div>
  </form>
</div>

{% if patients %}<div id="patient-data" hidden>{% for patient in patients %}"{{patient.username}}":null, {% endfor %}</div>{% endif %}
{% if doctors %}<div id="doctor-data" hidden>{% for doctor in doctors %}"{{doctor.username}}":null, {% endfor %}</div>{% endif %}
<!--{% if cases %}<div id="case-data" hidden>{% for case in cases %}"{{case.id}}":"{{case.description}}", {% endfor %}</div>{% endif %}-->

{% endblock %}
